import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import './Index.css'

interface props {

}
function Index(props: props) {
  const items: MenuProps['items'] = [
    {
      label: '首页',
      key: '/index/main',
    },
    {
      label: '个人服务',
      key: '/index/myse',
    },
    {
      label: '法人服务',
      key: '/index/corporateServices',
    },
    {
      label: '服务清单',
      key: '/index/fuwu',
    },
    {
      label: '好差评',
      key: 'SubMenu',
    },
    {
      label: '效能督察',
      key: 'SubMenu',
    },
  ]
  const { pathname } = useLocation()
  const [current, setCurrent] = useState('/index/main');
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
    navigate(e.key)
  };
  // 实例化路由对象
  var navigate = useNavigate();
  var gologin = () => {
    navigate('/login')
  }
  return (
    <div className='Index'>
      <div className='Index-header'>
        <div>
          <img src="https://cdn7.axureshop.com/demo/1568099/images/%E9%A6%96%E9%A1%B5_1/u2731.png" alt="" />
          <h3>政府服务网上办事大厅 </h3>
          <span>当前区域:陕西省</span>
        </div>
        <div className='header-mi'>
          <span>国家政府服务平台</span>
          <span>无障碍阅读</span>
          <span onClick={gologin}>登录</span>
        </div>
      </div>
      <div className='index-nav'>
        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
      </div>
      <div className='index-main'>
        <Outlet />
      </div>
      <div className='header-footer'>

      </div>
    </div>
  );
}

export default Index;